<template>
  <div class="picture-list-view">
    <template v-for="(imgItem, imgIndex) in list" :key="imgIndex">
      <div class="img-list-item" @click="imgZoom(list, imgIndex)">
        <img v-src="imgItem.filePath || imgItem.url" :key="imgItem.filePath || imgItem.url">
      </div>
    </template>
  </div>
</template>

<script setup>/**
 * 图片文件列表
 * @props list {Array} 图片列表数据
 */
import {getCurrentInstance} from "vue";

const cxt = getCurrentInstance()
const $wkPreviewFile = cxt.appContext.config.globalProperties.$wkPreviewFile

defineOptions({
  name: 'PictureListView',
})

const props = defineProps({
  list: {
    type: Array,
    required: true
  }
})

// 放大图片
function imgZoom(val, k) {
  $wkPreviewFile.preview({
    index: k,
    data: val.map(function (item, index, array) {
      return {
        url: item.filePath || item.url,
        name: item.name
      }
    })
  })
}
</script>


<style scoped lang="scss">
.picture-list-view {
  .img-list-item {
    display: inline-block;
    position: relative;
    margin-right: 10px;
    cursor: pointer;

    img {
      max-width: 80px;
      max-height: 60px;
    }
  }
}
</style>
